<template>
  <div class="data-object-detail">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>数据对象详情</span>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>
      
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="对象名称">{{ dataObject.name }}</el-descriptions-item>
        <el-descriptions-item label="对象类型">{{ dataObject.type }}</el-descriptions-item>
        <el-descriptions-item label="所属数据源">{{ dataObject.sourceName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ dataObject.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ dataObject.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ dataObject.owner }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">
          {{ dataObject.description }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="table-section mt-4">
        <h3>字段信息</h3>
        <el-table :data="dataObject.fields" style="width: 100%">
          <el-table-column prop="name" label="字段名称" />
          <el-table-column prop="type" label="字段类型" />
          <el-table-column prop="description" label="字段描述" />
          <el-table-column prop="isPrimary" label="是否主键">
            <template #default="scope">
              <el-tag :type="scope.row.isPrimary ? 'success' : 'info'">
                {{ scope.row.isPrimary ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isNullable" label="是否可为空">
            <template #default="scope">
              <el-tag :type="scope.row.isNullable ? 'info' : 'danger'">
                {{ scope.row.isNullable ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="stats-section mt-4">
        <h3>使用统计</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-statistic title="表记录数" :value="dataObject.recordCount" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="总存储量" :value="dataObject.storageSize" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="访问频次" :value="dataObject.accessCount" />
          </el-col>
        </el-row>
      </div>

      <div class="preview-section mt-4">
        <h3>数据预览</h3>
        <el-table :data="dataObject.previewData" border style="width: 100%">
          <el-table-column 
            v-for="field in dataObject.fields" 
            :key="field.name" 
            :prop="field.name" 
            :label="field.name" 
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 模拟数据
const dataObject = ref({
  id: '1',
  name: 'user_info',
  type: '表',
  sourceName: 'MySQL业务库',
  createTime: '2023-01-01 12:00:00',
  updateTime: '2023-06-15 15:30:00',
  owner: '张三',
  description: '用户基本信息表，存储用户的核心数据',
  recordCount: 1256890,
  storageSize: '128MB',
  accessCount: 5689,
  fields: [
    { name: 'id', type: 'INT', description: '用户ID', isPrimary: true, isNullable: false },
    { name: 'username', type: 'VARCHAR(50)', description: '用户名', isPrimary: false, isNullable: false },
    { name: 'email', type: 'VARCHAR(100)', description: '邮箱地址', isPrimary: false, isNullable: true },
    { name: 'phone', type: 'VARCHAR(20)', description: '手机号码', isPrimary: false, isNullable: true },
    { name: 'created_at', type: 'DATETIME', description: '创建时间', isPrimary: false, isNullable: false },
    { name: 'status', type: 'TINYINT', description: '用户状态', isPrimary: false, isNullable: false }
  ],
  previewData: [
    { id: 1, username: 'user1', email: 'user1@example.com', phone: '13800000001', created_at: '2023-01-01', status: 1 },
    { id: 2, username: 'user2', email: 'user2@example.com', phone: '13800000002', created_at: '2023-01-02', status: 1 },
    { id: 3, username: 'user3', email: 'user3@example.com', phone: '13800000003', created_at: '2023-01-03', status: 0 },
    { id: 4, username: 'user4', email: 'user4@example.com', phone: '13800000004', created_at: '2023-01-04', status: 1 },
    { id: 5, username: 'user5', email: 'user5@example.com', phone: '13800000005', created_at: '2023-01-05', status: 1 }
  ]
})

onMounted(() => {
  // 实际项目中，这里应该根据route.query.id获取数据对象详情
  const id = route.query.id
  console.log('获取数据对象ID:', id)
  // 调用API获取详情数据
  // fetchDataObjectDetail(id)
})

// 模拟API请求函数
const fetchDataObjectDetail = (id: string | string[]) => {
  console.log('获取数据对象详情，ID:', id)
  // 实际项目中这里应该调用API
  // const { data } = await getDataObjectDetail(id)
  // dataObject.value = data
}

// 返回上一页
const goBack = () => {
  router.push('/metadata/dataobject')
}
</script>

<style scoped lang="scss">
.data-object-detail {
  padding: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mt-4 {
    margin-top: 20px;
  }
  
  h3 {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 16px;
  }
  
  .preview-section {
    overflow-x: auto;
  }
}
</style> 